<template>
	<view class="login-info">
		<view class="title">完善您的信息</view>
		<view class="info-item">
			<view class="info-title">性别</view>
			<view class="content radios">
				<view @click="userInfo.gender = 1" class="radio" :class="userInfo.gender === 1 ? 'active':''">
					<img src="/schoolCube/static/img/man.png" alt="" />男
				</view>
				<view style="width: 90rpx;"></view>
				<view @click="userInfo.gender = 2" class="radio" :class="userInfo.gender === 2 ? 'active':''">
					<img src="/schoolCube/static/img/woman.png" alt="" />女
				</view>
			</view>
		</view>
		<view class="info-item">
			<view class="info-title">地区</view>
			<picker mode="selector" :range="citys" @change="changeCity" :value="userInfo.cityId - 1">
				<view class="content">
					<view class="input" v-if="userInfo.address">{{userInfo.address}}</view>
					<view class="input" v-else style="color: #999">请选择地区</view>
				</view>
			</picker>
		</view>
		<view class="info-item">
			<view class="info-title">姓名</view>
			<view class="content">
				<input type="text" placeholder="请输入姓名" v-model="userInfo.name">
			</view>
		</view>
		<view class="info-item">
			<view class="info-title">联系电话</view>
			<view class="content">
				<input type="text" placeholder="请输入电话号码" v-model="userInfo.phone" disabled>
			</view>
		</view>
		<view class="info-item">
			<view class="info-title">中考分数</view>
			<view class="content">
				<input type="number" placeholder="请输入中考分数" v-model="userInfo.score">
			</view>
		</view>
		<view class="button">
			<button type="primary" @click="confim">确认</button>
		</view>
		
	</view>
</template>

<script>
	import {
		getUserInfo,
		saveUserInfo,
		getAllCitys
	} from '@/requests/index.js'
	export default {
		data() {
			return {
				phone: '',
				userInfo: {
					id: '',
					name: '',
					address: '',
					gender: '',
					score: '',
					cityId: 0,
				},
				citys: []
			}
		},
		methods: {
			changeCity(e){
				this.userInfo.address = this.citys[e.target.value];
				this.userInfo.cityId = Number(e.target.value + 1);
			},
			objToArr(obj) {
				let arr = []
				for (let key in obj) {
					arr.push(obj[key])
				}
				return arr;
			},
			async confim(){
				const req = {...this.userInfo};
				req.score = Number(req.score);
				await saveUserInfo(req);
				uni.reLaunch({
				  url: '/pages/home/index' // 目标tabbar页面的路径
				})
			}
		},
		mounted() {
			const that = this;
			uni.getStorage({
				key: 'phone',
				success: async function(res) {
					const result = await getUserInfo({
						phone: res.data
					});
					if (result.id) {
						that.userInfo.id = result.id;
						that.userInfo.name = result.name;
						that.userInfo.address = result.address;
						that.userInfo.cityId = result.cityId;
						that.userInfo.gender = result.gender;
						that.userInfo.phone = result.phone;
						that.userInfo.score = result.score;
					}
					const citys = await getAllCitys();
					that.citys = that.objToArr(citys);
				},
				fail: function(err) {}
			});
		}
	}
</script>

<style lang="scss" scoped>
	.login-info {
		padding: 30rpx;
		font-size: 30rpx;

		.title {
			font-size: 60rpx;
			line-height: 80rpx;
			margin: 40rpx 0;
		}

		.info-item {
			margin: 30rpx;

			.info-title {
				font-size: 36rpx;
				line-height: 60rpx;
			}

			.content>input,
			.content>.input
			{
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 10rpx;
				background: #F3F3F3;
				text-align: center;
				font-size: 30rpx;
			}

			.radios {
				display: flex;

				.radio {
					flex: 1;
					height: 70rpx;
					background: #F3F3F3;
					border-radius: 10rpx;
					line-height: 70rpx;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;

					img {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}

				.radio.active {
					border: 2rpx solid #2979FF;
				}
			}
		}

		.button {
			padding: 0 36rpx;
			margin: 60rpx 0;
		}
	}
</style>